let shageRender = (function () {
    const uncoverAnimation = {
        show: {
            slices: {duration: 500, easing: 'easeInOutCirc', delay: (_, i) => i * 50}
        },
        hide: {
            slices: {duration: 500, easing: 'easeInOutCirc', delay: (_, i) => i * 50}
        }
    };
    let autoTimer = null;

    class Slideshow {
        constructor(el) {
            this.DOM = {el: el};
            this.DOM.slides = Array.from(this.DOM.el.querySelectorAll('.slide'));
            this.slidesTotal = this.DOM.slides.length;
            this.current = 0;
            this.uncoverItems = [];
            this.DOM.slides.forEach((slide, pos) => {
                this.uncoverItems.push(new Uncover(slide.querySelector('.slide__img'), {
                    slicesTotal: 10,
                    slicesColor: '#fff',
                    orientation: 'horizontal',
                    slicesOrigin: {show: 'left', hide: 'right'}
                }));
            });
            this.init();
        }

        init() {
            this.isAnimating = true;
            this.DOM.slides[this.current].classList.add('slide--current');
            this.uncoverItems[this.current].show(true, uncoverAnimation.show).then(() => this.isAnimating = false);
        }

        navigate(pos) {
            if (this.isAnimating || this.current === pos || pos < 0 || pos > this.slidesTotal - 1) return;
            this.isAnimating = true;
            this.uncoverItems[this.current].hide(true, uncoverAnimation.hide).then(() => {
                this.DOM.slides[this.current].classList.remove('slide--current');
                this.current = pos;
                const newItem = this.uncoverItems[this.current];
                newItem.hide();
                this.DOM.slides[this.current].classList.add('slide--current');
                newItem.show(true, uncoverAnimation.show).then(() => this.isAnimating = false);
            });
        }
    };

    return {
        init: function init() {
            imagesLoaded(document.querySelectorAll('.slide__img'), {
                background: true
            }, () => {
                const slideBox = document.querySelector('.slides'),
                    slideList = slideBox.querySelectorAll('.slide'),
                    slideshow = new Slideshow(slideBox);
                slideList.forEach((item, index) => {
                    item.className = index === 0 ? 'slide slide--current' : 'slide';
                });
                let step = -1,
                    len = slideList.length;
                clearInterval(autoTimer);
                autoTimer = setInterval(() => {
                    if (slideshow.isAnimating) return;
                    if (step >= len - 1) {
                        step = -1;
                    }
                    slideshow.navigate(++step);
                }, 3000);
            });
        },
        uninit: function uninit() {
            clearInterval(autoTimer);
        }
    }
})();

$(function () {
    $(document).on('touchstart touchmove touchend', function (ev) {
        ev.preventDefault();
    });

    /*SWIPER*/
    function handlePage(swiper) {
        var activeIn = swiper.activeIndex,
            slideAry = swiper.slides;

        var $preBtn = $('.preBtn');
        if ($preBtn.length) {
            if (activeIn === slideAry.length - 1) {
                $preBtn.css('display', 'none');
            } else {
                $preBtn.css('display', 'block');
            }
        }

        slideAry.forEach((item, index) => {
            var is_slide = $(item).find('.slide--current').length ? true : false;
            if (activeIn === index) {
                item.id = `page${index + 1}`;
                if (is_slide) {
                    shageRender.init();
                } else {
                    shageRender.uninit();
                }
                return;
            }
            item.id = null;
        });
    }

    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        onInit: handlePage,
        onTransitionEnd: handlePage
    });

    /*MUSIC*/
    var $musicBtn = $('.musicBtn'),
        musicAudio = $('.musicAudio')[0];
    if ($musicBtn.length && musicAudio) {
        $musicBtn.tap(() => {
            if (musicAudio.paused) {
                musicAudio.play();
                $musicBtn.addClass('move');
                return;
            }
            musicAudio.pause();
            $musicBtn.removeClass('move');
        });
    }
});